docs(ensnode.io): unify LinkCard hover styles in colored asides#2233
docs(ensnode.io): unify LinkCard hover styles in colored asides#2233notrab wants to merge 4 commits into
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 57 minutes and 14 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughUpdated ChangesStarlight Styling Updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR updates the docs site’s Starlight theme CSS to make LinkCard hover styling consistent inside colored asides (tip/danger/caution), aligning background/border/title/icon hover behavior.
Changes:
- Added aside-specific CSS custom properties for LinkCard background/border/title hover colors.
- Added hover color transitions for LinkCard icons and titles.
- Adjusted the markdown link hover override to avoid interfering with LinkCard hover styling (needs a small selector fix—see PR comment).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/ensnode.io/src/styles/starlight.css (1)
651-665: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick winConsider applying the token-based approach to the note variant for consistency.
The tip, danger, and caution aside variants now use dedicated tokens for link-card backgrounds, borders, and hover states, but the note variant retains static styling without hover background/border changes. While this may be intentional, it creates an inconsistency where link-cards in note asides will fall back to the default hover behavior (lines 210-213) rather than variant-specific styling.
For maintainability and consistent user experience, consider defining
--aside-note-card-*tokens and applying the same pattern used for the other three variants.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/ensnode.io/src/styles/starlight.css` around lines 651 - 665, The .starlight-aside--note block currently only sets --aside-color and styles .sl-link-card, .title, and .icon but doesn't define or apply variant-specific card tokens, causing note link-cards to use the default hover styles; add dedicated tokens like --aside-note-card-bg, --aside-note-card-border, --aside-note-card-hover-bg (mirroring the tip/danger/caution pattern) and apply them to .starlight-aside--note .sl-link-card for background, border-color, and hover state so the note variant follows the same token-based styling as the other aside variants.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 651-665: The .starlight-aside--note block currently only sets
--aside-color and styles .sl-link-card, .title, and .icon but doesn't define or
apply variant-specific card tokens, causing note link-cards to use the default
hover styles; add dedicated tokens like --aside-note-card-bg,
--aside-note-card-border, --aside-note-card-hover-bg (mirroring the
tip/danger/caution pattern) and apply them to .starlight-aside--note
.sl-link-card for background, border-color, and hover state so the note variant
follows the same token-based styling as the other aside variants.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: ee7f1f75-d8ac-43cb-bfe0-a14fcc69b08c
📒 Files selected for processing (1)
docs/ensnode.io/src/styles/starlight.css
Greptile SummaryThis PR unifies the hover and resting styles for
Confidence Score: 5/5Pure CSS change scoped to documentation site styles; no logic, data, or runtime impact. The change is entirely cosmetic CSS: new custom properties derived from existing aside colors via color-mix(), applied consistently to all four aside types. All four variants (tip, danger, caution, note) now receive both resting and hover treatments. The specificity cascade is correct — aside-scoped rules win over the global .sl-link-card:hover .title rule. The .sl-markdown-content a:hover exclusion update correctly prevents the generic link-hover style from interfering with link cards. No regressions or omissions detected. No files require special attention. Important Files Changed
Reviews (3): Last reviewed commit: "Merge origin/main into docs/linkcard-asi..." | Re-trigger Greptile |
|
@greptile-apps review again |
Resolved conflict in docs/ensnode.io/src/styles/starlight.css: kept the .sl-link-card exclusions on the markdown-link hover rule and main's added .omnigraph-required-table-content selector. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| --aside-caution-card-border-hover: color-mix( | ||
| in srgb, | ||
| var(--aside-caution-color) 70%, | ||
| transparent | ||
| ); |
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@notrab Great style improvements! Nice work 😄 Please take the lead to merge when ready 🫡
Lite PR
Tip: Review docs on the ENSNode PR process
Summary
Why
Testing
Notes for Reviewer (Optional)
Pre-Review Checklist (Blocking)